<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'

const email = ref('')
const password = ref('')

function login(): void {
  const ts = document.getElementById('ts')
  if (email.value.length < 1) {
    ts.innerHTML = '邮箱不能为空'
    setTimeout(() => {
      ts.innerHTML = ''
    }, 2000)
    return
  }
  if (password.value.length < 1) {
    ts.innerHTML = '密码不能为空！'
    setTimeout(() => {
      ts.innerHTML = ''
    }, 2000)
    return
  }
  c.value = true
  const params = new URLSearchParams()
  params.append('email', email.value)
  params.append('password', password.value)
  axios.post('/api/login/password', params).then(
    (res) => {
      if (res.data.msg) {
        setTimeout(() => {
          localStorage.setItem('token', res.data.token)
          localStorage.setItem('user', email.value)
          location.reload()
          if (email.value == 'admin') {
            window.open('/admin', '_self')
          } else {
            window.open('/home', '_self')
          }
        }, 1000)
      } else {
        c.value = false
        ts.innerHTML = res.data.token
        setTimeout(() => {
          ts.innerHTML = ''
        }, 2000)
      }

    }
  )


}

const c = ref(false)
</script>

<template>
  <div class="mm-container" v-loading="c">
    <div class="input">
      <input placeholder="邮箱" v-model="email" type="email" />
    </div>
    <div class="input">
      <input placeholder="密码" v-model="password" type="password" />
    </div>
    <div id="ts"></div>
    <div class="button">
      <el-button type="info" round @click="login">登录</el-button>
    </div>
  </div>
</template>

<style scoped>
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {

  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 50000s ease-in-out 0s;
  -webkit-text-fill-color: aliceblue;
}

/deep/ .el-loading-mask {
  background-color: rgb(59 59 59 / 81%);
}

/deep/ .el-input__inner {
  color: #ffffff;
  background-color: transparent;
}

.mm-container {
  width: 100%;
  height: 100%;
  padding: 10% 10% 5%;
}

.input {
  width: 80%;
  margin: 0 auto 20px;
}

.button {
  width: 100%;
  text-align: center;
  margin-top: 20px
}

.input input {
  background-color: #ffffff00;
  border: 0;
  border-bottom: 1px solid white;
  width: 100%;
  height: 40px;
  padding-top: 12px;
  font-size: 15px;
  color: #ffffff;
}

.input input[type="email"]:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  border-bottom: 1px solid #ffffff;
}

.input input[type="password"]:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  border-bottom: 1px solid #ffffff;
}

.el-button.is-round {
  width: 303px;
  height: 45px;
}

#ts {
  width: 80%;
  text-align: center;
  margin: 0 auto;
  height: 25px;
  animation: hidetip 5s 1;
  animation-fill-mode: forwards;
  -webkit-animation: showtip 5s 1;
  -webkit-animation-fill-mode: forwards;

}

</style>